<template>
	<view class="index">
		<nav-bar title="一键预算" isBack></nav-bar>
		<!-- 顶部 -->
		<view class="topcont">
			<view class="topinput">
				<view class="i_top">
					<view class="i_tCan" slot="center">
						<!-- <view>

						</view>
						<view class="i_tInput">
							<view class="i_tiIcon iconfont icon-search"></view>
							<input type="text" confirm-type="search" v-model="searchVal" @confirm="searchData"
								placeholder="搜索您感兴趣的内容" placeholder-class="col-ccc" />
						</view> -->
						<view class="i_tBtn">
							<view class="i_tbIcon" @click="gitchat()"><text class="iconfont iconhuaban110"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="i_three">
				<view class="i_tSwiper" style="height:480rpx">
					<swiper autoplay interval="4200" duration="300" @change='threeBannerChange'>
						<swiper-item v-for="(item,index) in banner" :key="index">
							<view class="i_tCont">
								<image :src="item.img" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="i_tDots">
						<view class="i_tDot" v-for="(item,index) in banner" :key="index"
							:class="{'active': index == threeIndex}">
							<view class="i_tIcon"></view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="i_bTitle">我家的装修预算</view>
		<view class="number">
			<view class="num-window" ref="numwindow">
				<view class="ge" v-if="1<strindex">
					<image :src="a" alt="">
				</view>
				<view class="shi" v-if="2<strindex">
					<image :src="b" alt="">
				</view>
				<view class="bai" v-if="3<strindex">
					<image :src="c" alt="">
				</view>
				<view class="qian" v-if="4<strindex">
					<image :src="d" alt="">
				</view>
				<view class="wan" v-if="5<strindex">
					<image :src="e" alt="">
				</view>
				<view class="shiwan" v-if="6<strindex">
					<image :src="f" alt="">
				</view>
			</view>
			<view class="category">
				<span>材料费：？元</span>
				<span>人工费：？元</span>
				<span>设计费：？元</span>
				<span>质检费：？元</span>
			</view>
		</view>
		<view class="cardinput">
			<view class="card">
				<input class="price_input" style="padding-right: 50rpx;" placeholder="请输入您的房屋面积(必填)" type="number"
					v-model="area"></input>
				<text class="rightx">m²</text>
			</view>
			<view class="sing">
				<view class="cardlist">
					<view class="card">
						<picker @change="bindPicker" :range="bedroom">
							<text class="av1">{{room_type}}</text>
							<i class="iconfont icon-arrow-left-copy icon-place"></i>
						</picker>
					</view>
				</view>
				<view class="cardlist">
					<view class="card">
						<picker @change="bindPicker2" :range="Troom">
							<text class="av1">{{Troom_type}}</text>
							<i class="iconfont icon-arrow-left-copy icon-place"></i>
						</picker>
					</view>
				</view>
				<view class="cardlist">
					<view class="card">
						<picker @change="bindPicker3" :range="Wroom">
							<text class="av1">{{Wroom_type}}</text>
							<i class="iconfont icon-arrow-left-copy icon-place"></i>
						</picker>
					</view>
				</view>
				<view class="cardlist">
					<view class="card">
						<picker @change="bindPicker4" :range="Yroom">
							<text class="av1">{{Yroom_type}}</text>
							<i class="iconfont icon-arrow-left-copy icon-place"></i>
						</picker>
					</view>
				</view>
			</view>
            <view class="card">
            	<input class="price_input" style="padding-right: 50rpx;" placeholder="请输入您的所在小区(选填)" type="text"
            		v-model="name"></input>
            </view>
			<view class="card">
				<input class="price_input" style="padding-right: 50rpx;" placeholder="请输入您的姓名(选填)" type="text"
					v-model="estate"></input>
			</view>
			<view class="card">
				<input class="price_input" style="padding-right: 50rpx;" placeholder="请输入您的手机号码(必填)" type="number"
					v-model="phone"></input>
			</view>
			<view @click="submitAddress" class="bnts">立即计算</view>
			<view class="ofer">其他问题可咨询“<text>在线客服</text>”</view>

		</view>


		<view class="imgs">
			<image src="https://cos.ryz1620.com/liankun/static/ef1.jpg" mode="widthFix"></image>
		</view>
		<view class="imgs">
			<image src="https://cos.ryz1620.com/liankun/static/25.jpg" mode="widthFix"></image>
		</view>
		<!-- 装饰公司推荐-->
		<view class="i_demo">
			<view class="i_dOper" @click="toMoreDesgin"><text>更多</text>
				<view class="i_doIcon">
					<view class="iconfont icon-more"></view>
				</view>
			</view>
			<view class="i_dTitle">装饰公司推荐</view>
			<view class="i_dList">
				<view class="i_dItem" v-for="(item,index) in getRecommendList" :key="index"
					@click="navTo('/pages_design/pages/design/personal/personal?designerId=' + item.id)">
					<view class="i_dImg">
						<image
							:src="item.back_thumb_url.path || 'https://cos.ryz1620.com/liankun/static/IMG279.png'"
							mode="widthFix"></image>
					</view>
					<view class="i_dTit omit-2">{{item.title ||'装饰公司'}}</view>
					<view class="i_dUser">
						<view class="i_dHead">
							<image :src="item.avatar.path"></image>
						</view>
						<view class="i_dName">{{item.name ||'***'}}</view>
					</view>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar.vue"
	import service_mall from '@/service/mall.js'
	import service_design from '@/service/design'
	import URL from '@/config/url.js'

	export default {
		components: {
			navBar
		},

		data() {
			return {
				banner: [],
				threeIndex: 0,
				threeIndexs: 0,
				bannerlist: [],
				bedroom:["一室","二室","三室","四室","五室","六室"],
				Troom:["一厅","二厅","三厅","四厅","五厅","六厅"],
				Wroom:["一卫生间","二卫生间","三卫生间","四卫生间","五卫生间","六卫生间"],
				Yroom:["一阳台","二阳台","三阳台","四阳台","五阳台","六阳台"],
				room_type:'一室',
				Troom_type:'一厅',
				Wroom_type:'一卫生间',
				Yroom_type:'一阳台',
				userId: "",
				searchVal: '',
				getRecommendList: [],
				supportlist: [],
				//图片路径
				url: [
					"https://cos.ryz1620.com/liankun/static/zxbj_n0.png",
					"https://cos.ryz1620.com/liankun/static/zxbj_n1.png",
					"https://cos.ryz1620.com/liankun/static/zxbj_n2.png",
					"https://cos.ryz1620.com/liankun/static/zxbj_n3.png",
					"https://cos.ryz1620.com/liankun/static/zxbj_n4.png",
					"https://cos.ryz1620.com/liankun/static/zxbj_n5.png",
					"https://cos.ryz1620.com/liankun/static/zxbj_n6.png",
					"https://cos.ryz1620.com/liankun/static/zxbj_n7.png",
					"https://cos.ryz1620.com/liankun/static/zxbj_n8.png",
					"https://cos.ryz1620.com/liankun/static/zxbj_n9.png",
				],
				strindex: 6,
				a: '',
				b: '',
				c: '',
				d: '',
				e: '',
				f: '',
				area:'',
				bedroom_num:1,//卧室数
				parlour_num:1,
				toilet_num:1,
				balcony_num:1,//阳台数
				name:'',
				phone:'',
				estate:'',
			}
		},
		onLoad(params) {
			this.$utils.getUrl()
			this.banners()
			this.supports()
			this.changeNum(200)
			this.userId = uni.getStorageSync('userId')
			let token = uni.getStorageSync('token')
			if(params.share_uid){
				let shareuId= params.share_uid
				this.$store.commit('index/SET_shareuId', shareuId)
				if(token && shareuId){
					service_mall.getPromoter({share_uid:shareuId})
						.then(res => {
					})
				}
			}
		},
		onShareAppMessage(res) {
			let that = this
			if (res.from === 'button') {}
			return {
				title: '融易装',
				path: '/pages_now/pages/now/quote/index?share_uid=' + this.userId,
				success: function(res) {}
			}
		},
		methods: {
			// 3D-轮播图切换
			threeBannerChange(e) {
				this.threeIndex = e.detail.current
			},
			// 3D-轮播图切换
			threeBannerChanges(e) {
				this.threeIndexs = e.detail.current
			},
			searchData() {
				uni.navigateTo({
					url: '/pages_mall/pages/mall/goods/list?keyword=' + this.searchVal
				})
			},
			bindPicker: function(e) {
				this.bedroom_num =parseInt(e.target.value) + 1
				this.room_type = this.bedroom[e.target.value]
			},
			bindPicker2: function(e) {
				this.parlour_num = parseInt(e.target.value) + 1
				this.Troom_type = this.Troom[e.target.value]
			},
			bindPicker3: function(e) {
				this.toilet_num = parseInt(e.target.value) + 1
				this.Wroom_type = this.Wroom[e.target.value]
			},
			bindPicker4: function(e) {
				this.balcony_num = parseInt(e.target.value) + 1
				this.Yroom_type = this.Yroom[e.target.value]
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			toONEshop(url) {
				uni.navigateTo({
					url
				});
			},
			rangeRandom(minnum, maxnum) {
				return Math.floor(minnum + Math.random() * (maxnum - minnum + 1));
			},
			changeNum(time) {
				let that = this
				setInterval(that.times, time);
			},
			times() {
				let that = this
				var zbj,
					i;
				zbj = that.rangeRandom(10000, 200000) + '';
				// 换数字之前先全隐藏
				// 遍历数字,个位在length-1处
				var strl = zbj.length;
				that.strindex = strl
				for (let i = 0; i < zbj.length; i++) {
					// 遍历显示数字
					if (i == 1) {
						that.a = that.url[zbj[i]]
					} else if (i == 2) {
						that.b = that.url[zbj[i]]
					} else if (i == 3) {
						that.c = that.url[zbj[i]]
					} else if (i == 4) {
						that.d = that.url[zbj[i]]
					} else if (i == 5) {
						that.e = that.url[zbj[i]]
					} else if (i == 6) {
						that.f = that.url[zbj[i]]
					}
				}
			},
			// 推荐装饰公司
			supports() {
				service_design.support({
					identity: 1
				}).then(res => {
					if (res.code == 1) {
						this.getRecommendList = res.data
					}
				});
			},
			isPhone(t) {
			        return /^1[3|4|5|6|7|8|9]\d{9}$/.test(t);
			 },
			submitAddress(){
				if (!this.area) return uni.showToast({title: "请输入房屋面积", icon: "none"});
				if (!this.phone) return uni.showToast({title: "请填写号码", icon: "none"});
				if (!this.isPhone(this.phone)) return uni.showToast({title: "号码格式不对", icon: "none"});
				service_design.DesignOffer({
					area:this.area,
					bedroom_num:this.bedroom_num,
					parlour_num:this.parlour_num,//客订数
					toilet_num:this.toilet_num,//卫生间数
					balcony_num:this.balcony_num,//阳台数
					name:this.name,
					phone:this.phone,
					estate:this.estate,//小区
				}).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages_now/pages/now/quotedeatil/index?total_price='+ res.data.total_price + '&material_price=' + res.data.material_price + '&labor_price='+ res.data.labor_price + '&design_price='+ res.data.design_price + '&check_price='+ res.data.check_price,
						});
					}else{
						uni.showToast({title: res.msg, icon: "none"});
					}
				});
			},
			// 客服
			gitchat() {
				uni.showToast({
					title: '哎呀!不好意思，暂未配置客服...',
					icon: 'none',
					duration: 2000
				});
				// let token = uni.getStorageSync('token')
				// if (token) {
				// 	uni.navigateTo({
				// 		url: "/pages_customer/pages/index?partner_type=root&partner_id=0"
				// 	})
				// } else {
				// 	uni.showModal({
				// 		title: "提示！",
				// 		content: "请先登录！",
				// 		success: function(s) {
				// 			if (s.confirm) {
				// 				uni.navigateTo({
				// 					url: '/pages_login/pages/login/login/index',
				// 				});
				// 			}
				// 		}
				// 	});
				// }
			},
			// banner
			banners() {
				service_mall.index_getBanner({
					type: 23
				}).then(res => {
					if (res.code == 1) {
						this.banner = res.data
					}
				});
			},
			// 装饰公司更多按钮
			toMoreDesgin(){
				uni.navigateTo({
					url:'/pages_design/pages/design/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		display: flex;
		flex-flow: column;
	}

	.topcont {
		position: relative;
	}

	.topinput {
		position: absolute;
		top: 20rpx;
		width: 100%;
		left: 0;
		z-index: 99;
	}

	.kficon {
		position: absolute;
		bottom: 100rpx;
		width: 220rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #fff;
		text-align: center;
		border-radius: 50rpx;
		background: #ffbe00;
		left: 50%;
		margin-left: -90rpx;
	}

	.i_top {
		margin-top: 20rpx;
		padding-left: 32rpx;
		padding-right: 120rpx;
		position: relative;

		.i_tCan {
			width: 100%;
		}

		.i_tBtn {
			width: 100rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 10rpx;
			top: 0;
		}

		.i_tbIcon {
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			font-size: 42rpx;
		}

		.i_tbTxt {
			height: 28rpx;
			line-height: 28rpx;
			font-size: 20rpx;
			margin-top: 4rpx;
		}

		.i_tInput {
			height: 60rpx;
			border-radius: 36rpx;
			background: rgba(255, 255, 255, 0.5);
			position: relative;
			overflow: hidden;

			&>input {
				width: 100%;
				height: 100%;
				font-size: 24rpx;
				padding: 0 24rpx 0 72rpx;
			}
		}

		.i_tiIcon {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			color: #ccc;
			font-size: 32rpx;
			margin-top: -16rpx;
			position: absolute;
			top: 50%;
			left: 28rpx;
		}
	}

	.i_tSwiper {
		position: relative;
	}

	.i_tDots {
		width: 100%;
		position: absolute;
		bottom: 15rpx;
		left: 0;
		display: flex;
		justify-content: center;
	}

	.i_tDot {
		width: 50rpx;
		height: 6rpx;
		margin: 0 5rpx;

		&.active .i_tIcon {
			background: #ffd425;
		}

		.i_tIcon {
			width: 50rpx;
			height: 6rpx;
			background: rgba(255, 255, 255, .5);
		}
	}

	// 功能
	.i_fun {
		display: flex;
		padding: 30rpx;

		.i_fItem {
			flex: 1;
		}

		.i_fIcon {
			width: 60rpx;
			height: 60rpx;
			margin: 40rpx auto 0;
		}

		.i_fTxt {
			height: 34rpx;
			line-height: 34rpx;
			text-align: center;
			font-size: 24rpx;
			margin-top: 14rpx;
		}
	}

	.infodata {
		background: #fff;
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx 60rpx;

		.infoc {
			border: 1px #eb1d21 solid;
			height: 70rpx;
			line-height: 70rpx;
			display: flex;
			border-radius: 40rpx;

			.iconfont {
				display: flex;
				color: #eb1d21;
				font-size: 34rpx;
				width: 80rpx;
				justify-content: center;
			}

			.infocont {
				color: #eb1d21;
			}
		}
	}

	.btnicon {
		position: absolute;
		bottom: 100rpx;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: center;

		view {
			display: inline-block;
			background: rgba(255, 255, 255, 0.5);
			color: #fff;
			border-radius: 50rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			margin: 0 10rpx;
			text-shadow: 1px 1px 2px #333;
		}
	}

	.i_bOper {
		height: 62rpx;
		line-height: 62rpx;
		font-size: 24rpx;
		padding: 0 64rpx;
		margin-top: 30rpx;
		position: relative;
		float: right;
		padding-right: 30rpx;

		.i_boIcon {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			color: #6c6c6c;
			font-size: 30rpx;
			margin-top: 15rpx;
			float: right;
		}
	}

	.i_bTitle {
		height: 110rpx;
		line-height: 122rpx;
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 32rpx;
	}

	// 设计师推荐
	.i_design {
		margin-top: 24rpx;

		.i_dOper {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding: 0 72rpx;
			margin-top: 30rpx;
			position: relative;
			float: right;

			.i_doIcon {
				width: 32rpx;
				height: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 32rpx;
			}
		}

		.i_tOper {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding: 0 64rpx;
			margin-top: 30rpx;
			position: relative;
			float: right;

			.i_toIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				color: #6c6c6c;
				font-size: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 32rpx;
			}
		}

		.i_dTitle {
			height: 86rpx;
			line-height: 122rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding-left: 32rpx;
		}

		.i_dList {
			width: 100%;
			padding: 28rpx 32rpx;
			overflow-x: auto;
			white-space: nowrap;

			&::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
			}
		}

		.i_dItem {
			width: 512rpx;
			height: 446rpx;
			margin-right: 24rpx;
			border-radius: 10rpx;
			background: #fff;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .06);
			display: inline-block;

			&:nth-last-child(1) {
				margin: 0;
			}
		}

		.i_dUser {
			height: 164rpx;
			padding: 28rpx 28rpx 0;
		}

		.i_dHead {
			width: 64rpx;
			height: 64rpx;
			margin-right: 20rpx;
			border-radius: 50%;
			background: #f6f7fb;
			overflow: hidden;
			float: left;
		}

		.i_dFee {
			height: 44rpx;
			line-height: 44rpx;
			font-size: 20rpx;
			float: right;
		}

		.i_dName {
			height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			font-weight: bold;
			margin-top: 2rpx;
		}

		.i_dRemark {
			height: 28rpx;
			line-height: 28rpx;
			font-size: 20rpx;
			color: #939393;
		}

		.i_dTags {
			margin-top: 8rpx;
		}

		.i_dTag {
			height: 36rpx;
			line-height: 36rpx;
			color: #a98f68;
			font-size: 20rpx;
			padding: 0 20rpx;
			margin-right: 8rpx;
			border-radius: 18rpx;
			background: #f9f6f3;
			display: inline-block;
		}

		.i_dImage {
			height: 254rpx;
			margin: 0 28rpx;
			border-radius: 8rpx;
			background: #f6f7fb;
			overflow: hidden;
		}
	}

	// 推荐案例
	.i_demo {
		margin-top: 24rpx;

		.i_dOper {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding: 0 64rpx;
			margin-top: 30rpx;
			position: relative;
			float: right;
			padding-right: 30rpx;

			.i_doIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				color: #6c6c6c;
				font-size: 30rpx;
				margin-top: 15rpx;
				float: right;
			}
		}

		.i_dTitle {
			height: 110rpx;
			line-height: 122rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding-left: 32rpx;
		}

		.i_dList {
			padding-left: 32rpx;
		}

		.i_dItem {
			width: 332rpx;
			height: 492rpx;
			margin-right: 22rpx;
			border-radius: 10rpx;
			overflow: hidden;
			display: inline-block;
		}

		.i_dImg {
			width: 100%;
			height: 300rpx;
			background: #f6f7fb;
			overflow: hidden;
		}

		.i_dTit {
			line-height: 36rpx;
			font-size: 24rpx;
			margin-top: 14rpx;
		}

		.i_dTags {
			margin-top: 12rpx;
		}

		.i_dTag {
			height: 36rpx;
			line-height: 36rpx;
			color: #a98f68;
			font-size: 20rpx;
			padding: 0 16rpx;
			margin-right: 8rpx;
			border-radius: 18rpx;
			background: #f9f6f3;
			display: inline-block;
		}

		.i_dUser {
			color: #939393;
			margin-top: 16rpx;
		}

		.i_dRemark {
			height: 36rpx;
			line-height: 36rpx;
			font-size: 20rpx;
			float: right;
		}

		.i_dHead {
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
			border-radius: 50%;
			background: #f6f7fb;
			overflow: hidden;
			float: left;
		}

		.i_dName {
			height: 36rpx;
			line-height: 36rpx;
			font-size: 20rpx;
			overflow: hidden;
		}
	}

	.number {
		margin: 0 30rpx;
		background: #f0f0f0;
		border-radius: 10rpx;
		border: 1px #ccc solid;
	}

	.num-window {
		margin: 20rpx;
		height: 100rpx;
		border: 3rpx #333 solid;
		border-radius: 10rpx;
		background: #d3d3cb;

		view {
			width: 44rpx;
			height: 80rpx;
			float: right;
			margin-top: 10rpx;
			margin-right: 10rpx;
		}
	}

	.category {
		width: 70%;
		margin: 0 auto 20rpx;
		overflow: auto;

		span {
			width: 50%;
			float: left;
			text-align: center;
		}
	}

	.sing {
		padding: 0 20rpx;
		overflow: hidden;
	}

	.sing .cardlist {
		width: 50%;
		float: left;
	}

	.sing .cardlist .card {
		margin: 10rpx 10rpx;
		.icon-place{
			float: right;
		}
	}
	.card {
		padding: 20rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		margin: 20rpx 30rpx;
		position: relative;
		border: 1px #dfdfdf solid;
		border-radius: 10rpx;
	}

	.card_name {
		flex-shrink: 0;
		padding-right: 60rpx;
	}

	.price_input {
		width: 100%;
		font-size: 28rpx;
		text-align: left;
	}

	picker {
		width: 100%;
		text-align: left;
	}

	.cell_c,
	.cell navigator {
		margin: 20rpx;
		padding: 20rpx 0 20rpx 20rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
	}

	.cell_c picker {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		line-height: 25px;
		padding-left: 54rpx;
		height: 46rpx;
		text-align: left;
	}

	.cell_name {
		flex-shrink: 0;
	}

	.line {
		padding: 10rpx;
		background-color: #f6f6f6;
	}

	.radio-cell {
		padding: 20rpx;
		font-size: 28rpx;
		color: #999;
	}

	.bnt {
		background-color: #C3AB7C;
		color: #fff;

	}

	.bnt,
	.bnt-delete {
		padding: 20rpx 20rpx;
		margin: 20rpx;
		text-align: center;
		border-radius: 40rpx;
	}

	.bnt-delete {
		background-color: #f6f6f6;
	}

	.cards {
		padding: 10rpx 0;
		background-color: #fff;
		margin: 20rpx 0;

		.card_name {
			padding: 0 30rpx;

			text {
				float: right;
				color: #999;
			}
		}

		textarea {
			width: 100%;
			margin: 20rpx 0;
			background: #f8f8f8;
			border-radius: 10rpx;
			padding: 20rpx;
			height: 240rpx;
		}
	}
.bnts{
	margin: 30rpx;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
	background-color: #ff9000;
	color: #fff;
	box-shadow: 0 5rpx 10rpx #CCC;
	font-size: 30rpx;
	display: block;
	border-radius: 10rpx;
}
.ofer{
	text-align: right;
	margin-top: 30rpx;
	color: #909090;
	text{
		color: #f00;
	}
}	
</style>
